<template>
    <diV class="course_main_box_css">
      <div class="course_content_box_css">
        <el-table :data="tableData" border style="width: 100%;height: 100%;">
          <el-table-column type="selection" width="50"/>
          <el-table-column label="id" width="60">
            <template #default="scope">
              <div>
                <span>{{ scope.row.id }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="课程名" width="200">
            <template #default="scope">
              <div>
                <span>{{ scope.row.courseName }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="课程封面" width="200">
            <template #default="scope">
              <div>
                <!-- <span>{{ scope.row.name }}</span> -->
                <img :src="scope.row.courseCover" style="width: 11vw;height: 10vh;"/>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="课程上传人" width="100">
            <template #default="scope">
              <div>
                <span>{{ scope.row.courseUp}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="课程上传时间" width="170">
            <template #default="scope">
              <div>
                <span>{{ scope.row.courseDate }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="课程简介" width="330">
            <template #default="scope">
              <div>
                <span>{{ scope.row.courseInformation}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="300">
            <template #default="scope">
              <el-button size="small" @click="courseDataTablehandleEdit(scope.row.id, scope.row)" type="warning" style="width: 4vw; height: 3vh;"
                >修改</el-button
              >
              <el-button
                size="small"
                type="danger"
                @click="courseDataTablehandleDelete(scope.row.id)" style="width: 4vw; height: 3vh;"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="course_From_box_css" v-show="course_From_Show">
        <div class="course_from_content_box_css">
            <!-- <b style="font-size: 2vw;margin-left: 10vw;margin-top: 5vh;">文章管理</b> -->
            <!-- <div style="margin: 5vh auto;width: ;"></div> -->
              <el-form :label-position="labelPosition" label-width="80px" :model="courseDataTableformLabelAlign" style="margin: 5vh auto;width: 75%;height: 90%;">
                <el-form-item label="课程名">
                  <el-input v-model="courseDataTableformLabelAlign.course_name"></el-input>
                </el-form-item>
                <el-form-item label="上传人">
                  <el-input v-model="courseDataTableformLabelAlign.course_up"></el-input>
                </el-form-item>
                <el-form-item label="上传时间">
                  <el-input v-model="courseDataTableformLabelAlign.course_Date"></el-input>
                </el-form-item>
                <el-form-item label="课程简介">
                  <el-input type="textarea" v-model="courseDataTableformLabelAlign.course_information"></el-input>
                </el-form-item>
                <el-form-item label="课程封面">
                  <el-input v-model="courseDataTableformLabelAlign.courseCover"></el-input>
                </el-form-item>
                <el-form-item label="是否收费">
                  <el-input v-model="courseDataTableformLabelAlign.member"></el-input>
                </el-form-item>
                <el-form-item label="课程分类">
                  <el-input v-model="courseDataTableformLabelAlign.classification"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button size="small"  type="primary" style="width: 5vw;height: auto;" @click="updatecourse(courseDataTableformLabelAlign)">确定修改</el-button>
                  <el-button size="small"  type="primary" style="width: 5vw;height: auto;" @click="courseDataTabledeleteEdit">放弃修改</el-button>
                </el-form-item>
              </el-form>
          </div>
      </div>
    </diV>
  </template>
    
    <script>
    import axios from 'axios'
    export default {
      name:'Course',
      data(){
        return{
          course_From_Show:false,
          courseId:1,
          tableData:[
          ],
          courseDataTableimageUrl: '',
          courseDataTableArticleId:2,
          courseDataTableformLabelAlign: {
              course_Id: 0,
              course_name: '',
              course_up: '',
              course_Date: '',
              course_information:'',
              courseCover:'',
              member:0,
              classification:0
          },
        }
      },
      methods:{
        courseDataTablehandleEdit(index,row){
          this.course_From_Show=true
          this.courseDataTableformLabelAlign.course_Id=index
          console.log(index)
          this.courseDataTableformLabelAlign.course_name=row.courseName
          this.courseDataTableformLabelAlign.course_up=row.courseUp
          this.courseDataTableformLabelAlign.course_information=row.courseInformation
          this.courseDataTableformLabelAlign.courseCover=row.courseCover
          this.courseDataTableformLabelAlign.member=row.member
          this.courseDataTableformLabelAlign.classification=row.classification
          this.courseDataTableformLabelAlign.course_Date=row.courseDate
        },
        courseDataTablehandleDelete(index){
          var that=this
          axios.get('http://127.0.0.1/DeleteCourse',{params:{
            CourseId:index
          }}).then(function(res){
            console.log(res.data)
            if(res.data==1){
              alert("删除成功")
              that.$router.go(0)
            }else{
              alert("删除失败")
            }
          }).catch(function(error){
            alert("系统出错")
          })
        },
        courseDataTabledeleteEdit(){
          this.course_From_Show=false
        },
        courseupdateUser(DataTableformLabelAlign){
          console.log(DataTableformLabelAlign)
        },
        updatecourse(CourseDataTableformLabelAlign){
          var that=this
          axios.get('http://127.0.0.1/UpdateCourse',{params:{
            CourseId:CourseDataTableformLabelAlign.course_Id,
            courseCover:CourseDataTableformLabelAlign.courseCover,
            courseName:CourseDataTableformLabelAlign.course_name,
            courseUp:CourseDataTableformLabelAlign.course_up,
            courseInformation:CourseDataTableformLabelAlign.course_information,
            member:CourseDataTableformLabelAlign.member,
            classification:CourseDataTableformLabelAlign.classification,
            courseDate:CourseDataTableformLabelAlign.course_Date
          }}).then(function(res){
            console.log(res.data)
            if(res.data==1){
              alert("修改成功")
              that.$router.go(0)
            }else{
              alert("修改失败")
            }
          }).catch(function(error){
            console.log(error)
            alert("系统出错")
          })
        }
    },
    mounted(){
      var that=this
      axios.get('http://127.0.0.1/Course')
      .then(function(res){
        for(var i=0;i<res.data.length;i++){
          that.tableData.push(res.data[i])
        }
      })
      .catch(function(error){
        console.log(error)
      })
    }
  }
    </script>
  <style>
    .course_main_box_css{
      position: relative;
      width: 83vw;
      height: 86vh;
    }
    .course_content_box_css{
      position: absolute;
      z-index: 1;
      width: 100%;
      height: 100%;
    }
    .course_From_box_css{
      position: absolute;
      z-index: 2;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.5);
    }
    .course_from_content_box_css{
      position: absolute;
      top:7vh;
      left: 24vw;
      width: 40%;
      height: 85%;
      background-color: #fff;
      border: 1px solid rgba(0,0,0,.1);
      border-radius: 5px;
    }
  </style>